<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 20px 0">
        <el-tag>查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="100px" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="鲁通卡号">
          <el-input v-model="form.sys_bill_id" placeholder="请输入网厅账单号"></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="form.sys_bill_id" placeholder="请输入系统账单号"></el-input>
        </el-form-item>
        <el-form-item label="机构">
          <template slot-scope="scope">
            <el-select v-model="form.plat_id">
              <el-option v-for="item in Options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="账单日期">
          <el-date-picker v-model="form.periodTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重置</el-button>
        <el-button class="btn" @click="search" type="success">查询</el-button>
        <el-button class="btn" @click="exportForm" type="success">导出</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 20px 0">
        <el-tag>基本列表</el-tag>
      </h4>
      <el-table :data="baseList" height="350" border style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>
        <el-table-column prop="bill_id" label="鲁通卡号">
        </el-table-column>
        <el-table-column prop="bill_id" label="订单号">
        </el-table-column>
        <el-table-column prop="bill_id" label="通行费">
        </el-table-column>
        <el-table-column prop="bill_id" label="服务费">
        </el-table-column>
        <el-table-column prop="bill_id" label="合计">
        </el-table-column>
        <el-table-column prop="bill_id" label="账单日期">
        </el-table-column>
        <el-table-column prop="bill_id" label="入账日期">
        </el-table-column>
        <el-table-column prop="bill_id" label="机构" >
        </el-table-column>
        <el-table-column prop="bill_id" label="是否重复扣款">
        </el-table-column>
        <el-table-column prop="bill_id" label="调减重复扣款">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList } from '@/api/cardASplitReport'
  export default {
    data() {
      return {
        listLoading: '',
        currentPage: 1,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        baseList: [],
        perPageNum: 5,
        totalListNum: 0,
        form: {
          sys_bill_id: '',
          plat_id: '',
          periodTime: []
        },
        Options: [{
          value: '1',
          label: '支付宝'
        }, {
          value: '2',
          label: '微信'
        }]
      }
    },
    created() {
    },
    methods: {
      formatPlatId(row, column) {
        return row.plat_id === '1' ? '支付宝' : row.plat_id === '2' ? '微信' : '未知'
      },
      chooseTime() {
      },
      reset() {
        this.form = {}
      },
      search() { },
      exportForm() { },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        const params = {
          'page': this.currentPage,
          'per_num': val
        }
        this.fetchData(params)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        const params = {
          'page': val,
          'per_num': this.perPageNum
        }
        this.fetchData(params)
      },
      fetchData(param) {
        this.listLoading = true
        getList(param).then(res => {
          const data = res.data
          this.baseList = data.resultList
          this.totalListNum = data.total
        }).catch(er => { })
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .page-num {
    float: right;
  }
  .content {
    height: 440px;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 15px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .h100 {
    height: 50px;
  }
  .w100 {
    display: block;
    width: 100px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }
  .ib {
    display: inline-block;
    span {
      display: inline-block;
      width: 98px;
      text-align: right;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }

  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 60%;
      height: 550px;
      background-color: #fff;
    }
  }
  .buttonC{
    height: 40px;
    width: 35px;
  }
  .hhtx-chakan{
    font-size: 18px;

  }
</style>
